{% extends 'movie/base.html' %}
{% load staticfiles %}
{% block title %}{{ block.super }}the movie list {% endblock %}
{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'movie/css/_category.css' %}">
    <script type="text/javascript" src="{% static 'movie/js/bootstrap-paginator.js' %}"></script>
    <script type="text/javascript" src="{% static 'movie/js/_category.js' %}"></script>
    <script type="text/javascript" src="{% static 'movie/js/laydate/laydate.js' %}"></script>
{% endblock %}
{% block navbar %}
    {{ block.super }}
    <div id="filtrate-movie">
        <div class="filtrate-select">
            <ul class="select">
                <li class="select-list">
                    <dl id="select1">
                        <dt>分类：</dt>
                        <dd class="select-all selected"><a href="javascript:void(0)">全部</a></dd>
                        {% for category in categories %}
                            <dd><a href="javascript:void(0)">{{ category }}</a></dd>
                        {% endfor %}
                    </dl>
                </li>
                <li class="select-list">
                    <dl id="select2">
                        <dt>地区：</dt>
                        <dd class="select-all selected"><a href="javascript:void(0)">全部</a></dd>
                        {% for area in areas %}
                            <dd><a href="javascript:void(0)">{{ area }}</a></dd>
                        {% endfor %}
                    </dl>
                </li>
                <li class="select-list">
                    <dl id="select4">
                        <dt>年份</dt>
                        {#            < class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->#}
                        <dd>
                            <label for="year-one"></label><input type="text" class="layui-input" id="year-one">
                        </dd>
                        -
                        <dd>
                            <label for="year-two"></label><input type="text" class="layui-input" id="year-two">
                        </dd>
                    </dl>
                </li>
                {#    todo: 评分筛选 评分排序#}
                <li class="select-result">
                    <dl>
                        <dt>已选条件：</dt>
                        <dd class="select-no">暂时没有选择过滤条件</dd>
                    </dl>
                </li>
                <li class="select-submit">
                    {#            <form action="#" method="get" name="select-form" id="select-form" style="display: none">#}
                    <input type="button" name="select-submit" id="select-submit"
                           class="btn btn-warning" value="查询" style="display: none;"/>
                </li>
            </ul>
        </div>
        <div class="filtrate-pick">
            <div class="input-group input-group-lg">
                <input type="text" oninput="" class="form-control pick-content" placeholder="电影名" required
                       aria-describedby="sizing-addon1" list="movie-list">
                <span role="button" class="input-group-addon pick-movie" id="sizing-addon1">搜索电影</span>
            </div>
            <datalist id="movie-list">

            </datalist>
        </div>
{#        <div class="filtrate-sort">#}
{#            <ul class="nav nav-pills">#}
{#                <li role="presentation" class="active"><a href="#" class="filter-sort" data-sort="rating">按分数排序</a></li>#}
{#                <li role="presentation"><a href="#" class="filter-sort" data-sort="comments">按评论数排序</a></li>#}
{#            </ul>#}
{#        </div>#}
    </div>

{% endblock %}
{% block content %}
    <div class="row">
        {% for movie in movies.object_list %}
            <div class="col-sm-6 col-md-4 sudoku">
                <div class="thumbnail ">
                    <img src="{{ movie.image }}" alt="..."/>
                    <div class="caption">
                        <p><a href="{{ movie.get_absolute_url }}" class="btn btn-primary" role="button">详情</a></p>
                        <p><span>片名: {{ movie.title }}</span>
                            <em style="text-emphasis-color: #fd6262">{{ movie.rating }}</em></p>
                    </div>
                </div>
            </div>
        {% endfor %}

    </div>

    <ul class="paginator" style="position: relative; text-align: center">
        {% if movies.has_previous %}
            {# url的名字属性 后面是直接跟url的参数 #}
            <a href="{% url 'movie:movie_index' movies.previous_page_number %}">上一页</a>
        {% endif %}
        {% for number in movies.paginator.pager_num_range %}
            {#当前页的序号 movies.number#}
            {% if number == movies.number %}
                <a href="{% url 'movie:movie_index' number %}" style="font-size: 33px">{{ number }}</a>
            {% else %}
                <a href="{% url 'movie:movie_index' number %}">{{ number }}</a>
            {% endif %}
        {% endfor %}

        {% if movies.has_next %}
            <a href="{% url 'movie:movie_index' movies.next_page_number %}">下一页</a>
        {% endif %}
        {# 当前的页面的序号  num_pages:总页数#}
        <span>{{ movies.number }}/{{ movies.paginator.num_pages }}</span>
    </ul>
    <hr>
{% endblock %}
{% block script %}
    {{ block.super }}
    <script src="{% static 'movie/js/utensil.js' %}" type="text/javascript"></script>
    <script>
        laydate.render({
            elem: '#year-one',
            type: 'year'
        });
        laydate.render({
            elem: '#year-two',
            type: 'year'
        });
    </script>
{% endblock %}